<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <el-date-picker v-model="search.time" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :size="size"  />
                <div class="search-input">关键词</div>
                <el-input v-model="search.keyword" placeholder="版单编号/工厂货号/skc" clearable @change="handleKeyDown" />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" stripe remoteSort remoteFilter border>
                <el-table-column type="selection" width="80" align="center"></el-table-column>
                <el-table-column label="版单编号" prop="order_no" align="center" width="200"></el-table-column>
                <el-table-column label="商品信息" prop="goods" align="center" width="350">
                    <template #default="scope">
                        <div class="shopInfo">
                            <el-image class="img" :src="scope.row.images[0]" :preview-src-list="scope.row.images" :initial-index="0" fit="cover" preview-teleported="true" />
                            <div class="right">
                                <div>工厂货号：{{scope.row.goods.factory_art_no}}</div>
                                <div>样衣尺码：{{scope.row.goods.size}}</div>
                                <div>SKC：{{scope.row.goods.skc}}</div>
                                <div>颜色：{{scope.row.goods.colour}}</div>
                                <div v-if="scope.row.goods">商品品牌：{{scope.row.goods.brand_name}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="打板交期" prop="deliver_date" align="center" width="200">
                    <template #default="scope">
                        <div>{{scope.row.deliver_date}}</div>
                        <div class="day">
                            <div style="color:#67c23a">剩{{scope.row.has_day}}天</div>
                            <div style="color:red;margin-left:10px">超{{scope.row.extra_day}}天</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="最新进度" prop="schedule" align="center"></el-table-column>
                <!-- <el-table-column label="操作日志" prop="apply_name" align="center"></el-table-column> -->
                <el-table-column label="操作日志" align="center" >
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <el-button text type="primary" size="small" @click="show(scope.row, scope.$index)">查看</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <save-detail ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></save-detail>
</template>

<script>
import saveDetail from './saveDetail';
export default {
  components: { saveDetail },
	name: 'user',
	data() {
		return {
			dialog: {
				save: false,
			},
			apiObj: this.$API.develop.edition.templateScheduleList,
			search: {
				time: null,
			},
			//所需数据选项
			cates: [],
		}
	},
	mounted() {
	},
	methods: {
		//查看
		show(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("show").setData(row);
			});
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
        handleSuccess(data, mode) {
			if (mode == 'over') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        handleKeyDown() {
            this.upsearch()
        },
	}
}
</script>

<style lang="scss">
.search-input {
	width: auto;
	font-size: 14px;
}
</style>
